import React from "react";
import { Text,View,StyleSheet,FlatList,RefreshControl,ActivityIndicator,Image,TouchableOpacity } from "react-native";

const CITY_NAME = [{key: 'a'}, {key: 'b'},{key: 'c'},{key: 'd'}];
export default class FlatListDemo extends React.Component {
    static navigationOptions = ({ navigation })=>({
        title:navigation.getParam("title"),
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    });
    constructor(props){
        super(props);
        this.state = {
            isLoading:false,
            dataArray:[
                {
                    title:"欢迎四支部张嘉译加入我们",
                    createDate:'2018-8-9',
                    updatedData:'2018-11-12',
                    LatelyTitle:'各级党委关于老干部政策',
                },
                {
                    title:"欢迎四支部张嘉译加入我们1",
                    createDate:'2018-8-9',
                    updatedData:'2018-11-12',
                    LatelyTitle:'各级党委关于老干部政策',
                },
                {
                    title:"欢迎四支部张嘉译加入我们2",
                    createDate:'2018-8-9',
                    updatedData:'2018-11-12',
                    LatelyTitle:'各级党委关于老干部政策',
                },
            ]
        }
    }
    _renderItem = (item)=>{
        return (
            <View style={ styles.item }>
                <View style={ styles.itemContainer }>
                    <Text style={ styles.text } ellipsizeMode={"tail"} numberOfLines={1} >{ item.title }</Text>
                    <Text style={ styles.textDate }>{ item.createDate }</Text>
                </View>
                <View style={ [styles.itemContainer,styles.itemContainer1] }>
                    <Text style={ [styles.text,styles.LatelyDate] } ellipsizeMode={"tail"} numberOfLines={1} >{ item.title }</Text>
                    <Text style={ styles.textDate }>跟帖时间: { item.createDate }</Text>
                </View>
            </View>
        )
    };
    //加载数据
    loadData(refreshing){
        if(refreshing){  //下拉加载
            this.setState({
                isLoading:true,
            });
        }

        let dataArray = [];
        if(refreshing){
            for(let i=this.state.dataArray.length-1;i>=0;i--){
                dataArray.push(this.state.dataArray[i]);
            }
        }else{
            dataArray = this.state.dataArray.concat(CITY_NAME);
        }
        this.setState({
            dataArray:dataArray,
            isLoading:false,
        });
    }
    //上拉刷新
    genIndicator(){
        return (
            <View style={ styles.indicatorContainer }>
                <ActivityIndicator
                    style={ styles.indicator }
                    size={'small'}
                    color={'red'}
                    animating={true}
                />
                <Text style={styles.footerText}>正在加载更多</Text>
            </View>
        )
    }
    render(){
        return (
            <View style={ styles.container }>
                <FlatList
                    data={this.state.dataArray}
                    // columnWrapperStyle={{paddingLeft:10}}
                    renderItem={({item}) => this._renderItem(item)}
                    refreshControl={
                        <RefreshControl
                            title={"Loading"}
                            colors={['red']}
                            refreshing={ this.state.isLoading }
                            onRefresh={()=>{
                                this.loadData(true);
                            }}
                        />
                    }
                    ListFooterComponent={()=>this.genIndicator()}
                    onEndReached={()=>{
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1}
                />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        backgroundColor:'white',
    },
    item:{
        flex:1,
        padding:15,
    },
    text:{
        // marginTop: 10,
        width:200,
        fontSize: 15,
        fontWeight: 'bold',
    },
    indicatorContainer:{
        flex:1,
        flexDirection:'row',
        justifyContent:'center',
        alignItems: 'center',
    },
    indicator:{
        color:'red',
        margin:10,
    },
    footerText:{
        // marginBottom: 10,
        fontSize:13,
    },
    textDate:{
        // textAlign: 'right',
        // marginBottom: 15,
        color:'#999999',
        fontSize:13

    },
    itemContainer:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems: 'center',
    },
    itemContainer1:{
        marginTop: 10,
        borderBottomWidth: .5,
        borderBottomColor: '#ccc',
        paddingBottom: 10,
    },
    LatelyDate:{
        color:'#999999',
        fontSize:13,
    }
});